<template>
  <div class="a1">
    <div class="b1">
      <img src="/static/Home.png" mode="widthfix" alt="" class="c1">
      <div class="c2">首页</div>
      <div class="c3">功能菜单一</div>
    </div>
    <div class="b2">
      <div class="d1">
        <!-- <div class="e1"></div> -->
        <div class="box">
          <div class="tit">标题样式</div>
          <div class="boxnav" id="echart1" style="height: 180px"></div>
        </div>
        <div class="e2"></div>
        <div class="e3"></div>
      </div>
      <div class="d2"></div>
      <div class="d3"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'echartsDemo',
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['业务1', '业务2', '业务3', '业务4'],
          left: 'center',
          textStyle: { color: "#fff" },
        },
        grid: {
          left: '0',
          top: '30',
          right: '10',
          bottom: '0',
          containLabel: true
        },

        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)'
            }
          },
          axisLabel: {
            //   margin: 10,
            color: '#e2e9ff',
            textStyle: {
              fontSize: 14
            },
          },
        }],
        yAxis: [{
          splitNumber: 3,
          axisLabel: {
            formatter: '{value}',
            color: '#e2e9ff',
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.12)',
              type: 'dotted'
            }
          }
        }],
        series: [
          {
            name: '业务1',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {

              normal: {
                color: '#fbc20e',
                width: 2
              }
            },

            itemStyle: { normal: { color: '#fbc20e', } },
            data: [6, 2, 5, 1, 7, 4, 13, 4, 18, 6, 8, 4],

          },
          {
            name: '业务2',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 3,
            showSymbol: false,
            lineStyle: {

              normal: {
                color: '#f7717e',
                width: 2
              }
            },
            itemStyle: { normal: { color: '#f7717e', } },
            data: [4, 6, 4, 8, 6, 8, 4, 6, 2, 5, 1, 7],

          },
          {
            name: '业务3',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 3,
            showSymbol: false,
            lineStyle: {

              normal: {
                color: '#4670f4',
                width: 2
              }
            },

            itemStyle: { normal: { color: '#4670f4', } },
            data: [8, 6, 8, 4, 4, 6, 5, 4, 6, 2, 1, 7],

          },
          {
            name: '业务4',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 3,
            showSymbol: false,
            lineStyle: {

              normal: {
                color: '#64cd84',
                width: 2
              }
            },

            itemStyle: { normal: { color: '#64cd84', } },
            data: [8, 4, 6, 5, 4, 6, 2, 1, 7, 6, 8, 4],

          }
        ]
      },
    }
  },
  methods: {
    echarts_1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echart1'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  mounted() {
    this.echarts_1()
  }
}
</script>
<style scoped>
.a1 {
  width: 99vw;
  height: 98vh;
  background-color: #033c76;
  display: flex;
  flex-direction: column
}

.b1 {
  width: 100%;
  height: 90px;

  display: flex;
  align-items: center;
}

.c1 {
  width: 34px;
  height: 34px;
  margin-left: 20px;
}

.c2 {
  font-size: 16px;
  line-height: 90px;
  color: #fff;
  font-family: "微软雅黑";
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
}

.c3 {
  margin-left: 254px;
  font-size: 14px;
  color: #fff;
  line-height: 40px;
  font-family: "微软雅黑";
}


.b2 {
  width: 100%;
  flex: 1;
  display: flex;
}

.d1,
.d2,
.d3 {
  height: 100%;
}

.d1 {
  width: 25%;
  /* background-color: antiquewhite; */
  display: flex;
  flex-direction: column;
}

.e1 {
  flex: 1;
  /* background-color: rgb(108, 213, 255); */
}

.box {
  flex: 1;
  border: 1px solid rgba(7, 118, 181, .7);
  box-shadow: inset 0 0 5px rgba(7, 118, 181, .8);
  margin-bottom: 12px;
  position: relative;
}

.tit {
  padding: 10px 10px 10px 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  color: white;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}

/* .tit:before,
.tit01:before {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  background: rgba(22, 214, 255, .9);
  box-shadow: 0 0 5px rgba(22, 214, 255, .9);
  border-radius: 10px;
  left: 10px;
  top: 18px;
}

.tit:after,
.box:before {
  width: 100%;
  height: 1px;
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  background: linear-gradient(to right, #076ead, #4ba6e0, #076ead);
  box-shadow: 0 0 5px rgba(131, 189, 227, 1);
} */

.box:before {
  top: -1px;
}

.boxnav {
  padding: 10px;
}


.e2 {
  flex: 1;
  background-color: rgb(143, 250, 161);
}

.e3 {
  flex: 1;
  background-color: rgb(243, 162, 255);
}

.d2 {
  width: 50%;
  background-color: rgb(154, 255, 242);
}

.d3 {
  width: 25%;
  background-color: antiquewhite;
}
</style>